<template>
  <div>
    <div class="c-flex-row c-aligni-center ">
      <div class="c-fs24 c-fc-xblack c-ww180">
        {{ multiContent.content }}
      </div>
      <div
        v-for="index in 5"
        :key="index"
        class="c-ww44 c-hh44 c-mr24 item-cell"
        :class="
          multiContent.level == 1 && index <= 1
            ? 'Mult_b'
            : multiContent.level == 2 && index <= 2
              ? 'Mult_c'
              : multiContent.level == 3 && index <= 3
                ? 'Mult_d'
                : multiContent.level == 4 && index <= 4
                  ? 'Mult_e'
                  : multiContent.level == 5 && index <= 5
                    ? 'Mult_f'
                    : 'Mult_a'
        "
        @click="clickChangeMult(multiContent, index)"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Comment',
  components: {},
  props: {
    multiContent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      level: -1
    };
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  deactivated() {},
  mounted() {},
  methods: {
    clickChangeMult(item, index) {
      if (this.curRankIndex == index) {
        this.multiContent.level = -1;
      } else {
        this.multiContent.level = index;
      }
      item.level = this.multiContent.level;
      this.$emit('changeMult', item);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.item-cell {
  background-image: url('../../../assets/i/wap/live/comment.png');
  background-repeat: no-repeat;
  background-size: auto 1.1rem;
}
.Mult_a {
  background-position: -2.2rem 0;
}
.Mult_b {
  background-position: -3.3rem 0;
}
.Mult_c {
  background-position: -4.4rem 0;
}
.Mult_d {
  background-position: -5.5rem 0;
}
.Mult_e {
  background-position: -6.6rem 0;
}
.Mult_f {
  background-position: -7.7rem 0;
}
</style>
